/*******************************************************************************
 *  Step class
 *******************************************************************************

// options example
var options = {
    id: 'id',
    title: 'title',
    showTitle: true,
    description: 'description'
}

*/

var Step = function(options) {
    
    // this class should extend an Container class
    $.extend(true, this, new Element($('<section>')))
    
    // ------------------------------------------------------- fields
    this.controls = new Array();
    
    this.defaults = {
        showTitle: true
    };
    
    var settings = this.prepareSettings(options);
    
    // ------------------------------------------------------- methods
    
    /**
     *  Adds control to step
     *  @param control defines control
     *  @return class instance
     */
    this.add = function(control){
        this.append(control);
        this.controls.push(control);
        return this;
    }
    
    // ------------------------------------------------------- element creation
    this.setId(settings.id)
        .addClass('step sidebar-inner');
        
    if(settings.showTitle && settings.title){
        var container = $('<div>').addClass('sidebar sidebar-inner step-title');
        var stepInfo = $('<b>Step {0} of {1}.</b>').css('display', 'none').addClass('step-info');
        var title = $('<span>').text(' '+settings.title);
        var description = $('<small>').text(settings.description ? settings.description : '');
        container.append(stepInfo).append(title).append($('<br>')).append(description);
        //this.getElement().append(container);
        this.title = container;
    }
    
    this.getFields = function(){
        var result = new Array();
        for(var i=0;i<this.controls.length;i++){
            result = result.concat(this.controls[i].getFields());
        }
        return result;
    }
        
    console.log('Step was created with id = '+this.getId());
}